<template>
  <div class="content">
    <div class="gcysDiv">
      <TitleVue :name="'工程要素'" />
      <div class="content1Div">
        <div class="itemDiv" v-for="(item, index) in gcysList" :key="index">
          <img :src="require('@/assets/img/common/' + item.name + '.png')" alt="" />
          <div class="rightDiv">
            <p>{{ item.name }}</p>
            <p>{{ item.val }} {{ item.unit }}</p>
          </div>
        </div>
      </div>
      <div class="content2Div">
        <Title2Vue :name="'库容曲线'" />
        <div class="swDiv">
          <span v-for="(item, index) in swData" :class="activeIndex == index ? 'active' : ''" :key="index" @click="swChange(item, index)">
            {{ item.name }}
          </span>
        </div>
        <div id="curveChart" ref="curveChart"></div>
      </div>
    </div>

    <div class="sgjzDiv">
      <TitleVue :name="'水工建筑及设施'" />
      <div class="contentDiv">
        <div class="itemDiv" v-for="(item, index) in sgjzList" :key="index" @click="changeMap(item)">
          <img :class="showList.includes(item) ? 'activeImg' : ''" :src="require('@/assets/img/common/' + item + '.png')" alt="" />
          <p>{{ item }}</p>
        </div>
      </div>
      <Title2Vue :name="'标识标牌'" />
      <div class="chartsDiv">
        <PieCharts :id="'bsbpChart'" :pieData="optionData" ::roseType="'area'" :legendShow="true" />
      </div>
      <!-- <div id="bsbpChart" ref="bsbpChart"></div> -->
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import Title2Vue from '../common/title2Vue.vue'
import PieCharts from '../echarts/pieCharts.vue'

import * as echarts from 'echarts'
import 'echarts-gl'
import 'echarts/lib/chart/bar'
export default {
  name: 'QysRight',
  components: {
    TitleVue,
    Title2Vue,
    PieCharts
  },
  data() {
    return {
      gcysList: [
        { name: '工程规模', val: '中型', unit: '' },
        { name: '主坝坝型', val: '均质土坝', unit: '' },
        { name: '主坝坝高', val: 22.2, unit: 'm' }
      ],
      sgjzList: ['大坝', '溢洪道', '涵洞', '闸门', '界桩', '告示牌'],
      showList: [],
      activeIndex: null,
      swData: [
        {
          name: '死水位',
          sw: 1104.26
        },
        {
          name: '汛限水位',
          sw: 1106.46
        },
        {
          name: '设计洪水位',
          sw: 1108.08
        },
        {
          name: '校核洪水位',
          sw: 1109.09
        }
      ],
      optionData: [
        // {
        //   name: '导视类标识标牌',
        //   value: 10,
        //   itemStyle: {
        //     color: 'rgba(15, 243, 238, 0.4)',
        //     opacity: '1'
        //   }
        // },
        {
          name: '导视类',
          value: 1,
          itemStyle: {
            color: 'rgba(243, 235, 15, .6)',
            opacity: '1'
          }
        },
        {
          name: '公告宣传类',
          value: 1,
          itemStyle: {
            color: 'rgba(243, 90, 15, .6)',
            opacity: '1'
          }
        },
        {
          name: '名称编号类',
          value: 1,
          itemStyle: {
            color: 'rgba(234, 185, 68, 0.6)',
            opacity: '1'
          }
        },
        {
          name: '技术指标类',
          value: 2,
          itemStyle: {
            color: 'rgba(0, 184, 249, 0.6)',
            opacity: '1'
          }
        }
        // {
        //   name: '规章制度与操作流程类',
        //   value: 1,
        //   itemStyle: {
        //     color: 'rgba(0, 151, 195, 0.4)',
        //     opacity: '1'
        //   }
        // },
        // {
        //   name: '工作流程图',
        //   value: 1,
        //   itemStyle: {
        //     color: 'rgba(96, 243, 255, 0.4)',
        //     opacity: '1'
        //   }
        // }
      ]
    }
  },
  mounted() {
    this.renderCurveChart()
    // this.renderBsbpChart()
  },
  methods: {
    swChange(item, index) {
      if (index == this.activeIndex) {
        this.activeIndex = null
        this.$store.commit('getWater', {
          height: null,
          isShow: false
        })
        return
      }
      this.activeIndex = index
      this.$store.commit('getWater', {
        height: this.calcHighetDiff(item.sw),
        isShow: true
      })
    },
    calcHighetDiff(gc) {
      return Math.abs(gc - Math.abs(1110.76 - 1094))
      // return Math.abs(gc - Math.abs(this.bdgc - this.realElevation));
    },
    changeMap(item) {
      if (this.showList.includes(item)) {
        let index = this.showList.indexOf(item)
        if (index > -1) {
          this.showList.splice(index, 1)
        }
        this.$store.commit('changeMap', {
          val: item,
          isShow: false
        })
      } else {
        this.showList.push(item)
        this.$store.commit('changeMap', {
          val: item,
          isShow: true
        })
      }
    },
    renderCurveChart() {
      var chartData = [
        [1102.66, 0],
        [1102.96, 300.244],
        [1103.96, 880.832],
        [1104.76, 1290.172],
        [1104.96, 1390.002],
        [1105.96, 1660.454],
        [1106.96, 1890.714],
        [1107.96, 2000.924],
        [1108.96, 2000.134],
        [1109.96, 2002.204]
      ]
      //死水位 汛限水位正常蓄水位  设计洪水位  校核洪水位
      const specialArr = [
        [1104.26, 13.45],
        [1106.46, 120.53],
        [1108.08, 755.24],
        [1109.09, 1341.92]
      ]
      let yAxisArr = []
      chartData.forEach((arr) => {
        yAxisArr.push(arr[1])
      })
      if (this.myChart1) {
        this.myChart1.dispose()
      }
      this.myChart1 = echarts.init(this.$refs.curveChart)
      const option = {
        grid: {
          top: '15%',
          left: '10%',
          right: '15%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'axis',
          borderWidth: 0,
          axisPointer: {
            type: 'cross'
          },
          formatter: (params) => {
            let str
            switch (params[0].data[0]) {
              case 1104.26:
                str = '死水位'
                break
              case 1106.46:
                str = '汛限水位'
                break
              case 1108.08:
                str = '设计洪水位'
                break
              case 1109.09:
                str = '校核洪水位'
                break
              default:
                str = ''
                break
            }
            return str + `<div >库容：${params[0].data[0]} 万m³</div><div > 高程：${params[0].data[1].toFixed(2)}m</div>`
          }
        },
        xAxis: {
          type: 'value',
          name: 'V(万m³)',
          min: chartData[0][0],
          splitNumber: 10,
          minInterval: 0.5,
          max: chartData[chartData.length - 1][0],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#6FBEFF' //设置 字体颜色
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#6FBEFF' // 设置轴线颜色为红色
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: 'H(m)',
          min: Math.min(...yAxisArr),
          axisLabel: {
            show: true,
            textStyle: {
              color: '#6FBEFF' //设置 字体颜色
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#6FBEFF' // 设置轴线颜色为红色
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            z: 10,
            data: specialArr,
            type: 'scatter',
            symbol: 'triangle',
            symbolSize: 10,
            lineStyle: {
              color: '#5470C6',
              width: 2,
              type: 'dashed'
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: '#EE6666',
              color: 'yellow'
            }
          },
          {
            data: chartData,
            type: 'line',
            smooth: true
          }
        ]
      }
      this.myChart1.setOption(option)
    },
    // renderBsbpChart() {
    //   if (this.myChart2) {
    //     this.myChart2.dispose()
    //   }
    //   this.myChart2 = echarts.init(this.$refs.bsbpChart)
    //   const option = {
    //     legend: {
    //       top: 'bottom'
    //     },
    //     toolbox: {
    //       show: true,
    //       feature: {
    //         mark: { show: true },
    //         dataView: { show: true, readOnly: false },
    //         restore: { show: true },
    //         saveAsImage: { show: true }
    //       }
    //     },
    //     series: [
    //       {
    //         name: 'Nightingale Chart',
    //         type: 'pie',
    //         radius: [20, 60],
    //         center: ['50%', '50%'],
    //         roseType: 'area',
    //         itemStyle: {
    //           borderRadius: 8
    //         },
    //         data: [
    //           { value: 40, name: 'rose 1' },
    //           { value: 38, name: 'rose 2' },
    //           { value: 32, name: 'rose 3' },
    //           { value: 30, name: 'rose 4' },
    //           { value: 28, name: 'rose 5' },
    //           { value: 26, name: 'rose 6' },
    //           { value: 22, name: 'rose 7' },
    //           { value: 18, name: 'rose 8' }
    //         ]
    //       }
    //     ]
    //   }
    //   this.myChart2.setOption(option)
    // }
    renderBsbpChart() {
      if (this.myChart2) {
        this.myChart2.dispose()
      }
      this.myChart2 = echarts.init(this.$refs.bsbpChart)
      this.option = this.getPie3D(this.optionData, 0.85)
      //将配置项设置进去
      this.myChart2.setOption(this.option)
    },
    getPie3D(pieData, internalDiameterRatio) {
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          //系统名称
          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
          type: 'surface',
          //是否为参数曲面（是）
          parametric: true,
          //曲面图网格线（否）上面一根一根的
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          }
        }
        //曲面的颜色、不透明度等样式。
        if (typeof pieData[i].itemStyle != 'undefined') {
          let itemStyle = {}
          typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null
          typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }
      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value)
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      //(第二个参数可以设置你这个环形的高低程度)
      let boxHeight = this.getHeight3D(series, 25) //通过传参设定3d饼/环的高度
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        //图例组件
        legend: {
          data: legendData,
          //图例列表的布局朝向。
          orient: 'vertical',
          right: '15%',
          top: 'center', //垂直方向位置
          //图例文字每项之间的间隔
          itemGap: 10,
          textStyle: {
            rich: {
              val: {
                color: '#FFFFFF',
                fontSize: '20.81px'
              },
              names: {
                color: '#0FF3EE',
                fontSize: '16px',
                padding: [0, 0, 5, 0]
              },
              line: {
                fontSize: '16.51px',
                color: '#A0B9C8'
              }
            }
          },
          show: true,
          icon: 'circle',
          textStyle: {
            color: '#00FFFF'
          },
          //格式化图例文本（我是数值什么显示什么）
          formatter: function (name) {
            var target
            for (var i = 0, l = pieData.length; i < l; i++) {
              if (pieData[i].name == name) {
                target = pieData[i].value
              }
            }
            let item = legendBfb.filter((item) => item.name == name)[0]
            let bfs = that.fomatFloat(item.value * 100, 1) + '%'
            // return `{names|${name}}\n{val|${target}} {line|/}{val|${bfs}}`
            return `${item.name}`
          }
          // 这个可以显示百分比那种（可以根据你想要的来配置）
          // formatter: function(param) {
          //     let item = legendBfb.filter(item => item.name == param)[0];
          //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
          //     console.log(item.name)
          //     return `${item.name} :${bfs}`;
          // }
        },
        //移动上去提示的文本内容
        tooltip: {
          show: true,
          formatter: (params) => {
            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
              let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) * 100).toFixed(2)
              let val = option.series[params.seriesIndex].pieData.value
              return `${params.seriesName}<br/>` + `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + `${val}`
            }
          }
        },
        //这个可以变形
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 1
        },
        //此处是修改样式的重点
        grid3D: {
          show: false,
          boxHeight: boxHeight, //圆环的高度
          //这是饼图的位置
          left: '-20%',
          bottom: '10%',
          viewControl: {
            //3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: 35, //角度(这个很重要 调节角度的)
            distance: 155, //调整视角到主体的距离，类似调整zoom(这是整体大小)
            rotateSensitivity: 0, //设置为0无法旋转
            zoomSensitivity: 0, //设置为0无法缩放
            panSensitivity: 0, //设置为0无法平移
            autoRotate: false //自动旋转
          }
        },
        series: series
      }
      return option
    },
    getHeight3D(series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value
      })
      return (height * 25) / series[0].pieData.value
    },
    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2
      let startRadian = startRatio * Math.PI * 2
      let endRadian = endRatio * Math.PI * 2
      let midRadian = midRatio * Math.PI * 2
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.05 : 1
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        x: function (u, v) {
          if (u < startRadian) {
            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          }
          if (u > endRadian) {
            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        y: function (u, v) {
          if (u < startRadian) {
            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          }
          if (u > endRadian) {
            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u)
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
        }
      }
    },
    fomatFloat(num, n) {
      var f = parseFloat(num)
      if (isNaN(f)) {
        return false
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
      var s = f.toString()
      var rs = s.indexOf('.')
      //判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + n) {
        s += '0'
      }
      return s
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .twoTitle {
    display: flex;
    align-items: center;
    span {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 1.5vh;
      color: #00ffff;
    }
    .line {
      width: 60%;
      height: 2px;
      background: #005566;
      margin-left: 20px;
      position: relative;
    }
    .line::after,
    .line::before {
      content: '';
      position: absolute;
      transform: translateY(-50%);
      width: 5px; /* 点的大小 */
      height: 5px; /* 点的大小 */
      background: radial-gradient(circle, #25d9da 50%, transparent 51%);
    }
    .line::before {
      left: 0; /* 根据需要调整位置 */
    }

    .line::after {
      right: 0; /* 根据需要调整位置 */
    }
  }
  .gcysDiv {
    height: auto;
    width: 100%;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    .content1Div {
      width: 100%;
      height: auto;
      padding: 0vh 0.5vw;
      box-sizing: border-box;
      margin-bottom: 1vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .itemDiv {
        width: auto;
        display: flex;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.5vh;
        color: #00ffff;
        img {
          width: 38%;
        }
        .rightDiv {
          margin-left: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          p:nth-child(1) {
            font-size: 1.7vh;
            padding-left: 5px;
            margin-bottom: 5px;
            background: linear-gradient(to right, #0565a7, transparent);
          }
        }
      }
    }
    .content2Div {
      width: 100%;
      height: auto;
      padding: 0vh 0.5vw 1vh;
      box-sizing: border-box;

      .swDiv {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-around;
        span {
          cursor: pointer;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #c5d1df;
        }
        .active {
          color: #00ffff;
        }
      }
      #curveChart {
        width: 100%;
        height: 20vh;
      }
    }
  }
  .sgjzDiv {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px 1vh;
    box-sizing: border-box;
    .contentDiv {
      flex: 1;
      margin-bottom: 1vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .itemDiv {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        img {
          width: 60%;
        }
        .activeImg {
          opacity: 0.6;
        }
        p {
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 1.7vh;
          color: #ffffff;
        }
      }
    }
    .chartsDiv {
      height: 18vh;
      width: 100%;
    }
  }
}
</style>
